<template>
  <div class="contentMateriel" @click.stop="aotuTab = false">
    <div class="header-card">
      <div class="tool">
        <el-button size="mini" type="primary" @click="preservation">
          {{ $t('btn.save') }}<!--保存-->
        </el-button>
      </div>
      <div class="organization">
        <el-form label-width="120px">
          <el-form-item v-for="(item,index) in materLength" :key="item" :label="(index + 1) + $t('market.materlen')">
            <el-input
              v-model="item.fname"
              size="mini"
              @input="indexSelf=index"
              @select="oneMater"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="openMater(index,materLength)"
              />
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handelClick">
      <el-tab-pane :label="$t('market.info')" name="basic">
        <jc-title :title1="$t('market.info1')" />
        <div class="information">
          <div class="images">
            <el-upload
              :action="actionUrl"
              :show-file-list="false"
              :on-change="getFile"
              :auto-upload="false"
              class="avatar-uploader"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <div v-if="imageUrl" class="magnify">
                <i class="el-icon-search" @click.stop="openImage = true" />
                <i class="el-icon-delete" @click.stop="deleteImg" />
              </div>
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
          <div class="basics">
            <jc-form
              :option-value="basicValue"
              :options="basic"
              :load-all="loadAll"
              :fcontrol="fcontrol"
              @handleChange="handleChange"
            >
              <template v-slot:state>
                <el-input
                  v-model="basicValue.fmodel"
                  class="autoModel input_width"
                  size="mini"
                />
              </template>
              <el-input
                v-model.trim="basicValue.fbaseUnit"
                class="input_width"
                size="mini"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="cliBaseUnit(1)"
                />
              </el-input>
            </jc-form>
          </div>
        </div>
        <jc-title :title1="$t('market.fince')" />
        <div class="control1">
          <el-form :model="finance" label-width="120px" size="mini">
            <el-form-item :label="$t('market.category')">
              <el-autocomplete
                ref="custom"
                v-model.trim="finance.fcategory"
                highlight-first-item
                popper-class="my-autocomplete"
                :fetch-suggestions="querySearch18"
                size="mini"
                @focus="getBasicUnit('SX_V_UNIT_CATEGORYID')"
                @select="selUnit"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="cliUnit('SX_V_UNIT_CATEGORYID')"
                />
                <template slot-scope="{ item }">
                  <div class="name">{{ item.fname }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
            <el-form-item :label="$t('market.materialGroup')">
              <el-input v-model.trim="finance.fmaterialGroupName">
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="handleGroup"
                />
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('market.researchPrice')">
              <el-input-number
                v-model.trim="finance.f_jc_salprice"
                controls-position="right"
              />
            </el-form-item>
          </el-form>
        </div>
        <jc-title :title1="$t('market.detailInfo')" />
        <div class="control">
          <el-checkbox
            :label="$t('market.isasset')"
            :disabled="assetsDisabled"
            :value="fisasset"
            @change="assets"
          />
          <el-checkbox
            :label="$t('market.isinventory')"
            :disabled="checkoutDisabled"
            :value="fisinventory"
            @change="stock"
          />
          <el-checkbox
            :label="$t('market.isproduce')"
            :disabled="checkoutDisabled"
            :value="fisproduce"
            @change="production"
          />
          <el-checkbox v-model="fispurchase" :label="$t('market.ispurChase')" />
          <el-checkbox
            :label="$t('market.issale')"
            :disabled="checkoutDisabled"
            :value="fissale"
            @change="sale"
          />
          <el-checkbox
            :label="$t('market.issubcontract')"
            :disabled="checkoutDisabled"
            :value="fissubcontract"
            @change="outsourcing"
          />
        </div>
        <el-divider class="weight" />
        <jc-form :option-value="weightValue" :options="weight">
          <el-input
            v-model.trim="weightValue.fname"
            class="input-width"
            size="mini"
            disabled
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="cliBaseUnit(4)"
            />
          </el-input>
        </jc-form>
        <el-divider class="dimensional" />
        <!--        // 尺寸单位-->
        <div>
          <jc-form
            ref="dimens"
            :option-value="dimensionalValue"
            :options="dimensional"
          >
            <el-input
              v-model.trim="dimensionalValue.fname"
              class="input-width"
              size="mini"
              disabled
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="cliBaseUnit(3)"
              />
            </el-input>
          </jc-form>
          <!--          <jc-title :title1="$t('market.packvol')" style="margin-bottom: 5px;" />-->
          <!--          <jc-table-->
          <!--            :table-data="packingValue"-->
          <!--            :table-header="packing"-->
          <!--            table-height="200px"-->
          <!--            serial-->
          <!--          >-->
          <!--            <template v-slot:tagSlot="col">-->
          <!--              <el-input-->
          <!--                v-model.trim="col.scope.row.fname"-->
          <!--                class="input-width"-->
          <!--                size="mini"-->
          <!--              >-->
          <!--                <i-->
          <!--                  slot="suffix"-->
          <!--                  class="el-input__icon el-icon-search"-->
          <!--                  @click="cliBaseUnit(2, col.scope.$index)"-->
          <!--                />-->
          <!--              </el-input>-->
          <!--            </template>-->
          <!--            <template v-slot:billSlot="col">-->
          <!--              <el-input-number v-model="col.scope.row.fGrossweight" size="mini" />-->
          <!--            </template>-->
          <!--            <template v-slot:btnState="col">-->
          <!--              <el-input-number v-model="col.scope.row.fNetweight" size="mini" />-->
          <!--            </template>-->
          <!--            <template v-slot:btnStates="col">-->
          <!--              <el-input-number v-model="col.scope.row.fLength" size="mini" />-->
          <!--            </template>-->
          <!--            <template v-slot:text2Slot="col">-->
          <!--              <el-input-number v-model="col.scope.row.fWidth" size="mini" />-->
          <!--            </template>-->
          <!--            <template v-slot:text3Slot="col">-->
          <!--              <el-input-number v-model="col.scope.row.fHeight" size="mini" />-->
          <!--            </template>-->
          <!--          </jc-table>-->
          <!--物料属性-->
          <jc-title :title1="$t('market.ferpcls')" style="margin-bottom: 5px;" />
          <jc-property
            :fnumber="copyNumber"
            :fid="profid"
            :fattstatus="fattstatus"
            @perty="pertyData"
            @copyMaterielValue="copyMaterielValue"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('market.stocknum')" name="inventory">
        <jc-inventory :information="information" :unit="units" />
      </el-tab-pane>
      <el-tab-pane :label="$t('market.sales')" name="market">
        <jc-market :company="company" :unit="units" />
      </el-tab-pane>
      <el-tab-pane :label="$t('market.purchase')" name="information">
        <jc-information :information="information" :unit="units" />
      </el-tab-pane>
      <el-tab-pane :label="$t('market.production')" name="production">
        <jc-production :company="company" :unit="units" />
      </el-tab-pane>
      <el-tab-pane :label="$t('market.machin')" name="machining" class="machining">
        <datum ref="datum" :basic-value="basicValue" :fcontrolled.sync="fcontrolled" />
      </el-tab-pane>
    </el-tabs>
    <!--    预览图片-->
    <el-dialog
      v-dialogDrag
      :title="$t('market.preview')"
      :visible.sync="openImage"
      :close-on-click-modal="false"
      close-on-press-escape
    >
      <div class="preview">
        <img :src="imageUrl" alt="预览图片" class="previewImg">
      </div>
    </el-dialog>
    <!--  1234级物料  -->
    <oneMater v-if="oneMateriel" :msg="codeFid" @oneMater="oneMater" />
    <el-dialog
      v-dialogDrag
      :title="$t('market.materialGroup')"
      model
      :visible.sync="openCustomer"
      :close-on-click-modal="false"
      width="30%"
    >
      <div class="public-form">
        <el-tree
          :data="fgroupArray"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </div>
    </el-dialog>
    <unit v-if="unitVisabled" :msg="funit" @unit="selUnit" />
    <baseUnit v-if="isBaseUnit" :msg="fisbaseunit" @unit="selBaseunit" />
  </div>
</template>

<script>
import jcForm from '@/components/Form'
import jcFormFunction from '@/components/Form/FormFunction'
import jcInformation from '@/views/basic/createMateriel2/components/Information'
import jcInventory from '@/views/basic/createMateriel2/components/inventory'
import jcMarket from '@/views/basic/createMateriel2/components/market'
import jcProperty from '@/views/basic/createMateriel2/components/property'
import jcProduction from '@/views/basic/createMateriel2/components/production'
import jcTitle from '@/components/Title'
import { insertMaterial, queryUserGroup, queryMaterialGradeList } from '@/api/basicManagement/createMateriel'
import mixinscom from '@/views/basic/createMateriel2/components/mixinscom'
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'
import { queryTBdStockList, queryViewItem } from '@/api/marketManage/marketOrder'
import { queryMaterialDetail } from '@/api/basicManagement/materielList'
export default {
  name: 'CreateMateriel2',
  components: {
    jcForm,
    jcInformation,
    jcInventory,
    jcMarket,
    jcProperty,
    jcProduction,
    datum: () => import('@/views/basic/createMateriel2/components/datum'),
    oneMater: () => import('@/views/basic/createMateriel2/components/oneMater'),
    jcTitle,
    unit: () => import('@/views/basic/createMateriel2/components/unit'),
    baseUnit: () => import('@/views/basic/createMateriel2/components/baseUnit')
  },
  mixins: [jcFormFunction, mixinscom, autocomplete],
  props: {
    fnumber: {
      type: [String, Number],
      default: '' || 0
    },
    isNewMateriel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      codeFid: 0, // 1234级编码fid
      unitVisabled: false,
      openCustomer: false,
      fisbaseunit: false,
      isBaseUnit: false,
      fgroupArray: [],
      defaultProps: {
        children: 'details',
        label: 'fname'
      },
      indexSelf: 0,
      funit: '',
      actionUrl: '/tBdMaterial/insertMaterial',
      activeName: 'basic', // 选项卡默认
      fdescripTion: '', // 描述后端返回值
      isMaterial: false, // 物料属性显示与隐藏
      fisasset: false, // 资产默认不打勾
      fisinventory: true, // 库存默认不打勾
      fisproduce: true, // 生产默认不打勾
      fispurchase: true, // 采购默认不打勾
      fissale: true, // 销售默认不打勾
      fissubcontract: true, // 允许委外
      assetsDisabled: true, // 资产禁用
      checkoutDisabled: false, // 单选框禁用
      openImage: false, // 打开图片
      oneMateriel: false, // 一级物料
      treeClickCount: 0, // 物料分组点击次数
      total: 0, // 条目
      materialCode: '', // 物料编码
      serialNumber: '', // 流水号
      dialogApi: Function, // 弹窗api
      company: {}, // 选中单位中文名称
      contrastPagination: {
        pageNum: 1, // 当前页
        pageSize: 1 // 每页显示多少条数据
      },
      units: {},
      basicUnit: [], // 基本单位
      materielProperty: [], // 颜色属性
      dimensionalValue: {}, // 尺寸值
      dimensional: {}, // 尺寸控件
      packingValue: [{
        fname: '千克',
        fWeightunitId: 36, // ID值
        fGrossweight: 0,
        fNetweight: 0,
        fLength: 0,
        fWidth: 0,
        fHeight: 0
      }], // 包装尺寸
      packing: [
        { label: this.$t('market.weightUnit'), prop: 'fname', type: 'tag' },
        { label: this.$t('market.grossweight'), prop: 'fGrossweight', type: 'bill' },
        { label: this.$t('market.netweight'), prop: 'fNetweight', type: 'state' },
        { label: this.$t('market.length'), prop: 'fLength', type: 'states' },
        { label: this.$t('market.width'), prop: 'fWidth', type: 'text2' },
        { label: this.$t('market.height'), prop: 'fHeight', type: 'text3' }
      ], // 包装尺寸
      basicValue: {}, // 基本数据
      basic: {}, // 基本控件
      weightValue: {}, // 重量数据
      weight: {}, // 重量控件
      // 一类物料值
      information: {
        fpurchasepriceUnit: '',
        fpurchasepriceUnitId: 0,
        fsupplierId: 0, // 供应商id
        fdefaultvendor: null, // 供应商名称
        fbillTypeId: 0, // 采购类型id
        fpobillTypeName: null, // 采购类型名称
        fquotaType: '1', // 配额方式id
        fstockId: 0, // 仓库
        fstock: '', // 仓库名称
        position: 0, // 仓位
        fminStock: 1, // 最小库存
        fsafeStock: 1, // 安全库存
        fmaxStock: 1 // 最大库存
      },
      copyNumber: '',
      fcontrolled: [], // 受控资料
      finance: {
        f_jc_salprice: 0,
        fmaterialGroup: '',
        fmaterialGroupName: '',
        fcategoryId: '', // 存货类型
        ftaxRateId: '' // 默认税率
      },
      fpaezData: [],
      profid: '',
      fattstatus: false,
      materLength: [], // 显示几级物料
      materRank: 1,
      weightData: [], // 重量单位
      volumeData: [], // 尺寸单位
      cellStyle1: { padding: '2px 0' },
      materAttribute: {}, // 物料属性
      dimensionalValue1: {},
      loadAll: [] // 记忆数据
    }
  },
  watch: {
    fnumber: {
      handler(newVal) {
        if (newVal) {
          this.handleControl()
        }
      },
      immediate: true
    }
  },
  created() {
    this.handleControl()
    this.handleGrade()
    this.loadAll = JSON.parse(localStorage.getItem('memoryData')) || []
  },
  methods: {
    handleChange(ev) {
      this.packingValue = []
      this.fpaezData.forEach(res => {
        if (res.value === ev) {
          this.packingValue.length = res.packQty
          this.packingValue = Array.from({ length: res.packQty }, () => ({
            fname: '千克',
            fWeightunitId: 36, // ID值
            fGrossweight: 0,
            fNetweight: 0,
            fLength: 0,
            fWidth: 0,
            fHeight: 0
          }))
        }
      })
    },
    handelClick(tab) {
      if (tab.name === 'machining') {
        this.$refs.datum.getMaterialGroupL()
      }
    },
    // 显示几级物料
    async handleGrade() {
      const { data: RES } = await queryMaterialGradeList({})
      this.materLength.length = RES.length
      this.materLength.fill({
        fid: 0, fname: '', concats: '', grade: 0
      })
    },
    // 打开1234级物料弹窗
    openMater(index, en) { // (下标, materLength)
      this.indexSelf = index
      this.codeFid = index === 0 ? 0 : en[index - 1].fid // fid
      // 依次选择物料
      if (index > 0 && this.codeFid === 0) return
      this.oneMateriel = true
    },
    // 允许资产
    assets() {
      this.fisasset = !this.fisasset
      if (this.fisasset) {
        this.fispurchase = true
        this.checkoutDisabled = true
        const res = ['fisinventory', 'fisproduce', 'fissale', 'fissubcontract']
        for (const key of res) {
          this[key] = false
        }
      } else if (!this.fisasset) {
        this.fispurchase = false
        this.fisinventory = false
        this.fisproduce = false
        this.fissale = false
        this.fissubcontract = false
        this.checkoutDisabled = false
      }
    },
    // 允许库存
    stock() {
      this.fisinventory = !this.fisinventory
      if (this.fisinventory) {
        this.assetsDisabled = true
      } else if (
        !this.fissubcontract &&
        !this.fissale &&
        !this.fisproduce &&
        !this.fisinventory
      ) {
        this.assetsDisabled = false
      }
    },
    // 允许生产
    production() {
      this.fisproduce = !this.fisproduce
      if (this.fisproduce) {
        this.assetsDisabled = true
      } else if (
        !this.fissubcontract &&
        !this.fissale &&
        !this.fisproduce &&
        !this.fisinventory
      ) {
        this.assetsDisabled = false
      }
    },
    // 允许销售
    sale() {
      this.fissale = !this.fissale
      if (this.fissale) {
        this.assetsDisabled = true
      } else if (
        !this.fissubcontract &&
        !this.fissale &&
        !this.fisproduce &&
        !this.fisinventory
      ) {
        this.assetsDisabled = false
      }
    },
    // 允许委外
    outsourcing() {
      this.fissubcontract = !this.fissubcontract
      if (this.fissubcontract) {
        this.assetsDisabled = true
      } else if (
        !this.fissubcontract &&
        !this.fissale &&
        !this.fisproduce &&
        !this.fisinventory
      ) {
        this.assetsDisabled = false
      }
    },
    // 重置弹窗
    resetMateriel() {
      this.serialNumber = ''
    },
    pertyData(ev) {
      this.materielProperty = ev
    },
    /** 复制物料保存需要的数据 */
    copyMaterielValue(data) {
      this.materielProperty = data
    },
    // 保存物料
    async preservation() {
      this.materAttribute = {}
      this.materielProperty.forEach(item => {
        this.$set(this.materAttribute, item.lable, item.value || '')
        this.$set(this.materAttribute, item.valus, item.name || '')
      })
      this.materLength.map((item, index) => {
        item.grade = index + 1
      })
      const {
        fsuite,
        fnumber,
        fbaseUnitId,
        fspecificaTion,
        fnames,
        fbarCode,
        ferpclsId,
        fmodel,
        fremarks,
        fdescripTion,
        fDictionaryId
      } = this.basicValue
      const DATA = {
        fcontrol: this.fcontrol,
        fspecjoinid: this.fspecjoinid,
        fattrjoinid: this.fattrjoinid,
        fDictionaryId,
        packList: this.packingValue,
        flargecode: '',
        fcontrolled: this.fcontrolled,
        fdocumentStatus: 'A', // 保存A
        gradecode: this.materLength, // 物料编码
        // 允许采购
        fispurchase: this.fispurchase,
        // 允许销售
        fissale: this.fissale,
        // 允许库存
        fisinventory: this.fisinventory,
        // 允许生产
        fisproduce: this.fisproduce,
        // 允许委外
        fissubcontract: this.fissubcontract,
        // 允许资产
        fisasset: this.fisasset,
        fnumber, // 物料编码
        fbaseUnitId, // 基本单位
        fspecificaTion, // 物料规格
        fnames, // 物料名称
        fbarCode, // 条码
        ferpclsId, // 物料类型
        fmodel, // 型号
        fremarks, // 物料备注
        fdescripTion, // 物料简称
        fsuite, // 套件
        fimg: this.imageUrl, // 图片地址
        // fdescripTion: fdescripTion.trim(), // 物料描述
        ...this.materAttribute // 物料属性组合
      }
      Object.assign(
        DATA,
        this.finance,
        this.dimensionalValue,
        this.weightValue,
        this.information,
        this.company
      )
      const CHECKOUT = [
        this.fisasset,
        this.fisinventory,
        this.fisproduce,
        this.fispurchase,
        this.fissale,
        this.fissubcontract
      ]
      const RES = CHECKOUT.every(item => {
        return item === false
      })
      if (RES === true) {
        this.$message.warning({ message: '控制信息必选一项！' })
        return
      }
      const insert = async() => {
        const { code, message, data } = await insertMaterial(DATA)
        if (code === 1) {
          this.$message.warning({ message })
          return
        }
        if (this.fnumber) {
          this.$emit('addMateriel', data.fnumber)
        } else if (this.isNewMateriel) {
          this.$emit('newMateriel', data)
        } else {
          // 关闭当前页面
          this.$store.dispatch('tagsView/guanbi', this.$route)
          this.$router.push({ path: `/detailMateriel/${data.fnumber}` })
        }
        this.$message({ showClose: true, message: message, type: 'success' })
        // 清空数据
        this.handleControl()
        this.imageUrl = ''
        this.materielProperty = []
        this.information = {}
        this.company = {}
        this.finance = {}
        // 以下几行代码，实现带输入建议的功能
        const list = JSON.parse(localStorage.getItem('memoryData')) || []
        if (list.length > 10) {
          list.pop()
        }
        list.unshift(fmodel)
        const res = [...new Set(list)]
        localStorage.setItem('memoryData', JSON.stringify(res))
      }
      insert()
    },
    // 基本单位
    cliBaseUnit(ev, index) {
      this.indexSelf = index
      this.unitype = ev
      this.isBaseUnit = true
      if (ev === 1) {
        this.fisbaseunit = true
      } else {
        this.fisbaseunit = false
      }
    },
    selBaseunit(ev) {
      if (ev.funitid) {
        if (this.unitype === 1) {
          // 基本单位
          this.basicValue.fbaseUnit = ev.fname
          this.basicValue.fbaseUnitId = ev.funitid
          this.units = {
            fname: ev.fname,
            fid: ev.funitid
          }
        } else if (this.unitype === 2) {
          // 重量单位
          this.packingValue[this.indexSelf].fname = ev.fname
          this.packingValue[this.indexSelf].fWeightunitId = ev.funitid
        } else if (this.unitype === 3) {
          // 尺寸单位
          this.dimensionalValue.fname = ev.fname
          this.dimensionalValue.fvolumeUnitId = ev.funitid
        } else if (this.unitype === 4) {
          this.weightValue.fname = ev.fname
          this.weightValue.fweightUnitId = ev.funitid
        }
      }
      this.isBaseUnit = false
    },
    cliUnit(ev, en) {
      this.funit = ev
      this.unitype = en
      this.unitVisabled = true
    },
    // 单位
    selUnit(ev) {
      if (ev.fid) {
        if (this.funit === 'SX_V_UNIT_TAXRATEID') {
          // 税率
          this.finance.ftaxRate = ev.fname
          this.finance.ftaxRateId = ev.fid
        } else if (this.funit === 'SX_V_UNIT_CATEGORYID') {
          // 存货类别
          this.finance.fcategory = ev.fname
          this.finance.fcategoryId = ev.fid
        }
      }
      this.unitVisabled = false
    },
    // 获取物料类型
    async getMaterielType() {
      const { data: RES } = await queryViewItem({
        viewName: 'SX_V_UNIT_ERPCLSID'
      })
      return RES.list.map(item => {
        const { fname: label, fid: value } = item
        return { label, value }
      })
    },
    // 获取套件
    async fsuiteDataType() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_V_UNIT_SUITE' })
      return RES.list.map(item => {
        const { fname: label, fid: value } = item
        return { label, value }
      })
    },
    // 包装方式
    async fpaezDataType() {
      const { data: RES } = await queryTBdStockList({})
      return RES.list.map(item => {
        const { fname: label, fid: value, packQty } = item
        return { label, value, packQty }
      })
    },
    // 删除上传图片
    deleteImg() {
      this.imageUrl = ''
    },
    // 打开物料分组
    async handleGroup() {
      this.openCustomer = true
      const { data: res } = await queryUserGroup({})
      this.fgroupArray = res
    },
    // 物料分组
    handleNodeClick(item) {
      this.treeClickCount++
      if (this.treeClickCount >= 2) return
      this.timer = window.setTimeout(() => {
        if (this.treeClickCount === 1) {
          this.treeClickCount = 0
        } else if (this.treeClickCount > 1) {
          this.treeClickCount = 0
          const { fid, fname } = item
          this.finance.fmaterialGroup = fid
          this.finance.fmaterialGroupName = fname
          this.openCustomer = false
        }
      }, 300)
    },
    /** 获取详情数据 */
    getDetailData(fnumber) {
      if (fnumber === '请添加数据' || !fnumber) {
        return
      }
      queryMaterialDetail({ fnumber })
        .then(res => {
          const { code, message, data } = res
          if (code !== 0) {
            this.$message.warning(message)
            return
          }
          const {
            fissuetypeId,
            funit,
            fdescripTion,
            ferpcls,
            fheight,
            fisasset,
            fisinventory,
            fisproduce,
            fispurChase,
            fissale,
            fissubcontract,
            fvolumeUnit,
            fvolumeUnitId,
            fthickness,
            fopenlength,
            fopenvolume,
            fopenthickness,
            fopenwidth,
            fopenheight,
            flength,
            fperimeter,
            fmnemoniccode,
            ferpclsId,
            fnames,
            fsuite,
            fvolume,
            fwidth,
            groupname,
            fbaseUnitId,
            fmaterialId,
            fremarks,
            fbarCode,
            fmodel,
            fimg,
            fspecificaTion,
            fminStock, // 最小库存
            fsafeStock, // 安全库存
            fmaxStock,
            fpurchaseUnit,
            fpurchaseUnitId,
            fdefaultvendor,
            fstoreUnit,
            fstoreUnitId,
            fstock,
            fstockId,
            fstockPlaceId,
            fstockPlaceName,
            fworkshop,
            fworkshopId,
            fproduceUnit,
            fproduceUnitId,
            fissueType,
            fpickStock,
            fpickStockId,
            fpickbinId,
            fsaleUnit,
            fsaleUnitId,
            foutStocklmth,
            foutStocklmtl,
            ffinishreceiptoverRate,
            ffinishreceiptshortRate,
            ftaxRate,
            ftaxRateId,
            fcategory,
            fcategoryId,
            fdocumentStatus, // 审核状态
            fpurchasepriceUnit,
            fpurchasepriceUnitId,
            f_jc_salprice,
            gradecode,
            fmaterialGroupName,
            fmaterialGroup,
            size,
            fnumber,
            fweightUnit,
            fweightUnitId,
            fgrossweight,
            fnetweight,
            packList,
            flargecode
          } = data
          this.copyNumber = fnumber
          this.fattstatus = true
          this.profid = flargecode
          this.packingValue = packList
          this.showDis = size
          this.fcontrol = size.fcontrol
          this.fspecjoinid = size.fspecjoinid
          this.fattrjoinid = size.fattrjoinid
          this.materLength = gradecode
          this.fdocumentStatus = fdocumentStatus
          this.finance = {
            f_jc_salprice, fmaterialGroup, fmaterialGroupName, ftaxRate, ftaxRateId, fcategory, fcategoryId
          }
          this.fmaterialId = fmaterialId
          this.imageUrl = fimg
          this.information = {
            fpurchasepriceUnit,
            fpurchasepriceUnitId,
            fpurchaseUnit,
            fpurchaseUnitId,
            fdefaultvendor,
            fstoreUnit,
            fstoreUnitId,
            fstock,
            fstockId,
            fstockPlaceId,
            fstockPlaceName,
            fminStock,
            fsafeStock,
            fmaxStock
          }
          this.company = {
            fworkshop,
            fworkshopId,
            fproduceUnit,
            fproduceunitId: fproduceUnitId,
            fissueType,
            fpickStock,
            fpickStockId,
            fpickbinId,
            fsaleUnit,
            fsaleUnitId,
            foutStocklmth,
            foutStocklmtl,
            ffinishreceiptoverRate,
            ffinishreceiptshortRate
          }
          this.basicValue = {
            fmnemoniccode,
            fnumber,
            groupname,
            ferpcls,
            ferpclsId,
            fsuite,
            fbaseUnit: funit,
            fbaseUnitId,
            fdescripTion,
            fspecificaTion,
            fnames,
            fmodel,
            fissuetypeId,
            fremarks,
            fbarCode // 隐藏
          }
          this.controlValue = {
            fisasset: fisasset === '1',
            fisinventory: fisinventory === '1',
            fisproduce: fisproduce === '1',
            fispurchase: fispurChase === '1',
            fissale: fissale === '1',
            fissubcontract: fissubcontract === '1'
          }
          this.weightValue = {
            fname: fweightUnit,
            fweightUnitId,
            fgrossWeight: fgrossweight,
            fnetWeight: fnetweight
          }
          this.dimensionalValue1 = {
            fname: fvolumeUnit,
            flength,
            fperimeter,
            fvolume,
            fwidth,
            fheight,
            fvolumeUnitId,
            fthickness,
            fopenLength: fopenlength,
            fopenVolume: fopenvolume,
            fopenThickness: fopenthickness,
            fopenWidth: fopenwidth,
            fopenHeight: fopenheight
          }
          this.disLength() // 尺寸
        })
        .catch(error => this.$message.warning(error))
    },
    async handleControl() {
      // 物料类型
      const materielType = await this.getMaterielType()
      // 物料套件
      const fsuiteData = await this.fsuiteDataType()
      // 包装方式
      this.fpaezData = await this.fpaezDataType()
      this.handleGrade()
      this.basicValue = {
        fbaseUnitId: '',
        fnumber: '',
        fbarCode: '无',
        ferpclsId: '',
        fspecificaTion: '',
        fnames: '',
        fmodel: '',
        fremarks: '',
        fDictionaryId: 24,
        fsuite: 58,
        fdescripTion: '' // 物料描述
      }
      this.basic = {
        fmodel: {
          label: this.$t('market.fmodel2'),
          type: 'autoTemplate',
          span: 6,
          labelWidth: '100px'
        },
        fnumber: {
          label: this.$t('market.fmaterial'),
          span: 6,
          labelWidth: '100px'
        },
        fnames: {
          label: this.$t('shop.fname2'),
          span: 6,
          labelWidth: '100px'
        },
        fspecificaTion: {
          label: this.$t('shop.fspecificaTion'),
          span: 6,
          type: 'text1',
          labelWidth: '100px'
        },
        fbaseUnitId: {
          label: this.$t('market.baseUnit'),
          type: 'slot',
          labelWidth: '100px',
          span: 6
        },
        ferpclsId: {
          label: this.$t('market.ferpclsId'),
          span: 6,
          type: 'select',
          labelWidth: '100px',
          selectItems: materielType
        },
        fsuite: {
          label: this.$t('market.suite'),
          span: 6,
          type: 'select',
          labelWidth: '100px',
          selectItems: fsuiteData
        },
        fremarks: {
          label: this.$t('market.fremark'),
          span: 6,
          labelWidth: '100px'
        },
        fDictionaryId: {
          label: this.$t('market.fpaezAssistant'),
          span: 6,
          type: 'select',
          selectItems: this.fpaezData,
          labelWidth: '100px'
        },
        fdescripTion: {
          label: this.$t('market.fdescripTion'),
          span: 12,
          labelWidth: '100px',
          type: 'textarea'
        }
      }
      this.weightValue = {
        fname: '千克',
        fweightUnitId: 36, // ID值
        fgrossWeight: 0,
        fnetWeight: 0
      }
      this.weight = {
        fname: {
          label: this.$t('market.weightUnit'),
          span: 4.8,
          type: 'slot'
        },
        fgrossWeight: {
          label: this.$t('market.grossweight'),
          span: 4.8,
          type: 'number'
        },
        fnetWeight: {
          label: this.$t('market.netweight'),
          span: 4.8,
          type: 'number'
        }
      }
      if (this.$route.params.id) {
        this.getDetailData(this.fnumber || this.$route.params.id)
      }
    },
    disLength() {
      this.dimensionalValue = {
        fname: '毫米',
        fvolumeUnitId: 540082,
        flength: 0.0,
        fperimeter: 0.0,
        fwidth: 0.0,
        fheight: 0.0,
        fopenLength: 0.0,
        fvolume: 0.0,
        fthickness: 0.0,
        fopenWidth: 0.0,
        fopenHeight: 0.0,
        fopenVolume: 0.0,
        fopenThickness: 0.0,
        ...this.dimensionalValue1
      }
      this.dimensional = {
        fname: {
          label: this.$t('market.volumeUnit'),
          type: 'slot',
          span: 4.8
        },
        fperimeter: {
          label: this.$t('market.perimeter'),
          disabled: !this.showDis.flength,
          type: 'number',
          span: 18
        },
        flength: {
          label: this.$t('market.length'),
          span: 4.8,
          ref: 'length',
          disabled: !this.showDis.flength,
          type: 'number'
        },
        fwidth: {
          label: this.$t('market.width'),
          span: 4.8,
          disabled: !this.showDis.fwidth,
          type: 'number'
        },
        fheight: {
          label: this.$t('market.height'),
          span: 4.8,
          disabled: !this.showDis.fheight,
          type: 'number'
        },
        fthickness: {
          label: this.$t('market.thickness'),
          span: 4.8,
          disabled: !this.showDis.fthickness,
          type: 'number'
        },
        fvolume: {
          label: this.$t('market.volume'),
          type: 'number',
          disabled: !this.showDis.fvolume,
          span: 4.8
        },
        fopenLength: {
          label: this.$t('market.openlength'),
          span: 4.8,
          disabled: !this.showDis.fopenlength,
          type: 'number'
        }
        // fopenWidth: {
        //   label: this.$t('market.openwidth'),
        //   span: 4.8,
        //   disabled: !this.showDis.fopenwidth,
        //   type: 'number'
        // },
        // fopenHeight: {
        //   label: this.$t('market.openheight'),
        //   span: 4.8,
        //   disabled: !this.showDis.fopenheight,
        //   type: 'number'
        // },
        // fopenThickness: {
        //   label: this.$t('market.openthickness'),
        //   span: 4.8,
        //   disabled: !this.showDis.fopenthickness,
        //   type: 'number'
        // },
        // fopenVolume: {
        //   label: this.$t('market.openvolume'),
        //   span: 4.8,
        //   disabled: !this.showDis.fopenvolume,
        //   type: 'number'
        // }
      }
    }
  }
}
</script>
<style scoped lang="scss">
.contentMateriel {
  @include createMateriel;
  min-width: 1600px;
  background: #fff;
  padding: 6px;
}
.images {
  position: relative;
}
.basics {
  width: 80%;
}
.avatar-uploader {
  @include upLoad;
}
.avatar-uploader:hover .magnify {
  display: block;
}
.el-tabs {
  background: #ffffff;
  &::v-deep .el-tabs__content {
    min-height: 78vh !important;
  }
}
.control1 {
  margin: 8px 0;
}
.materiel-form {
  position: relative;
  top: -20px;
  width: 100%;
  .btn {
    transform: translateY(18%);
    margin-left: 460px !important;
  }
  .btn1 {
    margin-left: 15px !important;
  }
}
.magnify {
  display: none;
  height: 120px;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  line-height: 120px;
  border-radius: 6px;

  i {
    font-size: 24px;
    color: #fff;
    padding: 0 15px;
  }
}
.preview {
  display: flex;
  justify-content: center;
  align-items: center;
  .previewImg {
    max-width: 600px;
    max-height: 600px;
  }
}

.el-form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .el-form-item {
    height: 35px;
    width: 300px;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .btnType {
      margin-right: 20px;
    }

    .el-date-editor.el-input {
      width: 100% !important;
    }

    .el-select {
      width: 100%;
    }
  }
}
.tabPosit {
  padding: 5px;
  box-shadow: 0 0 2px #aaa;
  position: absolute;
  top: 40px;
  left: 0;
  background-color: rgba(255, 255, 255, 1);
  z-index: 999999999;
}
</style>
